<template>
  <!-- 获取一个数组，结构为[{date:'时间',info:'内容内容'}] -->
  <!-- @click事件返回点击标签元素的索引值 第一项为0 -->
  <view class="bg">
    <view class="steps">
      <view class="steps_item" v-for="(item, index) in infoList">
        <view class="s_r">
          <!-- <view
            class="line"
            :style="{
              backgroundColor: index != 0 ? backgroundColor : 'rgba(0,0,0,0)',
            }"
          ></view> -->
          <view class="index">
            {{ formateUpdateTime(item.time) }}
          </view>
          <view
            class="line"
            :style="{
              backgroundColor:
                index != infoList.length - 1
                  ? backgroundColor
                  : 'rgba(0,0,0,0)',
            }"
          ></view>
        </view>
        <view class="s_l">
          <view
            class="info_item"
            v-for="(subItem, subIndex) in item.data"
            :key="subIndex"
          >
            <view :class="subIndex === 0 && index === 0 ? 'blue' : ''">{{
              subItem.processName
            }}</view>
            <view
              :style="{ WebkitLineClamp: lineNum != 0 ? lineNum : '' }"
              style="margin-top: 10rpx"
              >{{ subItem.createUserName }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import { formatTime } from "@/utils/date.js";
export default {
  name: "YSteps",
  props: {
    infoList: {
      type: Array,
      default: [],
    },
    color: {
      type: String,
      default: "#fff",
    },
    backgroundColor: {
      type: String,
      default: "#ff3838",
    },
    lineNum: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
  onLoad(e) {
    //获取列表
  },
  methods: {
    topage(e) {
      this.$emit("click", e);
    },
	formateUpdateTime(time) {
      return formatTime(time, "MM-DD");
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: white;
}

.bg {
  margin: 20upx 0;
  font-size: 14px;
  display: flex;
}

.steps {
  display: flex;
  flex-direction: column;
  width: 100vw;
  .steps_item {
    display: flex;
    margin-top: 30rpx;
    .s_r {
      padding: 0 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .line {
        flex: 1;
        /* width: 2rpx;
        background-color: #fff; */
		border:  1rpx dashed #fff;
      }

      .index {
        text-align: center;
      }
    }

    .s_l {
      padding: 0 20rpx;
      flex: 1;
      .info_item {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
.blue {
  color: #1890ff;
}
</style>
